<template>
  <div class="relative flex-center w-full h-full login-bg">
    <n-card :bordered="false" size="large" class="rounded-20px shadow-sm z-20 w-auto">
      <div class="w-320px">
        <header class="flex-y-center justify-around">
          <div class="w-70px h-70px rounded-35px overflow-hidden">
            <system-logo class="w-full h-full" :fill="true" />
          </div>
          <n-gradient-text :size="28" type="primary">{{ title }}</n-gradient-text>
        </header>
        <main class="pt-24px">
          <div v-if="validModule !== undefined">
            <h3 class="text-18px text-primary font-medium">{{ validModule.label }}</h3>
            <component :is="validModule.component"></component>
          </div>
        </main>
      </div>
    </n-card>
    <login-bg :theme-color="theme.themeColor" />
  </div>
</template>

<script setup lang="ts">
import type { Component, PropType } from 'vue'
import { computed } from 'vue'
import { getEnvTitle, addColorAlpha } from '@/utils'
import { LoginModuleDict } from '@/common'
import { LoginModuleType } from '@/interface'
import { LoginBg, SystemLogo } from '@/components'
import { PwdLogin, CodeLogin, Register, ResetPwd } from './components'
import { useThemeStore } from '@/store'

interface LoginModule {
  key: LoginModuleType
  label: string
  component: Component
}

interface Props {
  module?: LoginModuleType
}
const props = withDefaults(defineProps<Props>(), {
  module: 'pwd-login',
})
const title = getEnvTitle()
const theme = useThemeStore()

const modules: LoginModule[] = [
  { key: 'pwd-login', label: LoginModuleDict['pwd-login'], component: PwdLogin },
  { key: 'code-login', label: LoginModuleDict['code-login'], component: CodeLogin },
  { key: 'register', label: LoginModuleDict['register'], component: Register },
  { key: 'reset-pwd', label: LoginModuleDict['reset-pwd'], component: ResetPwd },
]

const validModule = computed(() => modules.find((item) => props.module === item.key))
const bgColor = computed(() => addColorAlpha(theme.themeColor, 0.1))
</script>

<style scoped>
.login-bg {
  background-color: v-bind(bgColor);
}
</style>
